<div role="region" aria-labelledby="search-label" class="search">
    <label for="search" class="label--block">
        <span class="label__text" id="search-label">Search</span>
    </label>
    <div class="search__input-wrapper">
        <svg class="search__icon" width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden="true" focusable="false">
            <path d="M17.5 17.5L13.875 13.875M15.8333 9.16667C15.8333 12.8486 12.8486 15.8333 9.16667 15.8333C5.48477 15.8333 2.5 12.8486 2.5 9.16667C2.5 5.48477 5.48477 2.5 9.16667 2.5C12.8486 2.5 15.8333 5.48477 15.8333 9.16667Z" stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round" />
        </svg>
        <p class="visually-hidden" id="search-hint">Results will be shown and updated as you type.</p>
        <div class="search__inner-input-wrapper">
            <input type="search" id="search" class="search__input" autocomplete="off" aria-describedby="search-hint" pattern="\S+">
            <button class="search__clear-btn" id="search__clear-btn" hidden>
                <span class="visually-hidden">Clear search</span>
                <svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true" focusable="false">
                    <path d="M9 3L3 9M3 3L9 9" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />
                </svg>
            </button>
        </div>
    </div>
    <div id="search-results-announcement" class="visually-hidden" aria-live="polite" aria-atomic="true"></div>
    <div id="search-results" class="search-results"></div>
</div>
